import React, { Component } from "react";
// 组件
import { Toast, Modal } from "antd-mobile";

import yhTools from "@tools/yh";
import { InterfaceG, channelCode } from "@config/Config";

import "./paySmsModal.scss";
import xhbpayClose from "@images/imageXHB/xhbpay-close.png";
/**
 * 描述：签约弹框组件
 * 作者：zenghq
 * 日期：2021-03-16
 */
class paySmsModal extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isSmsPay: true, // 是否是短信支付
			isSmsCount: false, // 是否倒计时
			countDownTime: 60, // 倒计时时间
			smsCode: "",
			isClickedSend: true,
			encryptMobile: "", // 脱敏手机号
			mobilePhone: "" // 短信手机号
		};
	}
	/*******************生命周期 start************************/
	componentDidMount = () => { };
	componentWillUnmount = () => { };
	async componentWillReceiveProps(props) {
		const { modProps = {} } = props;
		const { visible } = modProps;
		if (visible) {
			// 默认发送短信
			this.onTrigger();
		}
	}
	/*******************生命周期 end************************/

	/*******************业务方法 start************************/
	/**发送短信 */
	sendSms() {
		let objs = {
			url: InterfaceG.balanceSendHuaTongVerifyCode,
			params: {}
		};
		return yhTools.request(objs);
	}
	/**确认短信 */
	balancePaySignForHuaTong() {
		const { smsCode, mobilePhone } = this.state;
		let objs = {
			url: InterfaceG.balancePaySignForHuaTong,
			params: {
				channelCode,
				mobilePhone,
				smsCode
			}
		};
		return yhTools.request(objs);
	}
	/**短信倒计时 */
	countDown() {
		let { countDownTime } = this.state;
		this.setState({
			isSmsCount: true,
			isClickedSend: false
		});
		this.sendTimer = setInterval(() => {
			if (countDownTime < 1) {
				clearInterval(this.sendTimer);
				this.sendTimer = null;
				this.setState({
					countDownTime: 60,
					isSmsCount: false
				});
			} else {
				countDownTime--;
				this.setState({
					countDownTime
				});
			}
		}, 1000);
	}
	/**动态获取输入类型 */
	getInputType() {
		if (yhTools.platform() == "android") {
			return "number";
		}
		if (yhTools.platform() == "ios") {
			return "tel";
		}
	}

	/*******************业务方法 end************************/

	/*******************点击事件 start************************/
	// 重发验证码
	onTrigger = async () => {
		if (this.state.isSmsCount) {
			return false;
		}
		const resp = await this.sendSms();
		console.log('重新发送验证码结果：', resp);
		const { message, code, data = {} } = resp;
		if (code == 0) {
			const { encryptMobile = "", mobilePhone = "" } = data;
			this.setState({
				encryptMobile,
				mobilePhone
			});
			this.countDown(60);
		} else {
			message && Toast.info(message, 2);
		}
	};
	/**密码输入改变 */
	inputChange(e) {
		let value = e.target.value;
		if (e.target.value.length > 6) {
			value = e.target.value.slice(0, 6);
		}
		this.setState(
			{
				smsCode: value
			},
			async () => {
				if (value.length === 6) {
					document.activeElement.blur();
					Toast.loading("加载中...", 100);
					const resp = await this.balancePaySignForHuaTong();
					Toast.hide();
					const { message, code, data = {} } = resp;
					if (code == 0) {
						const { signStatus } = data;
						this.props.closeClick();
						if (signStatus == 0) {
							// 签约成功
							this.props.history.push("/contractSuccess");
						} else if (signStatus == 2) {
							// 签约中
							this.props.history.push("/xhbBalanceInSign");
						} else {
							// 签约失败
							this.props.history.push("/contractFail");
						}
					} else if (code == 100062) {
						// 账户已签约，请不要重复签约
						this.props.history.push("/xhbBalanceAccountOpened");
					} else {
						message && Toast.info(message, 2);
					}
				}
			}
		);
	}
	/*******************点击事件 end************************/

	/**渲染 */
	render() {
		const { modProps, closeClick } = this.props;
		const {
			smsCode = "",
			isClickedSend,
			isSmsCount,
			countDownTime,
			encryptMobile
		} = this.state;
		const smsCodeArr = smsCode.split("");
		return (
			<Modal {...modProps} className="ballance_pay_sms-content">
				<img onClick={closeClick} src={xhbpayClose} className="close" />
				<div className="title">请输入验证码</div>
				<div className="sms-box">
					<span className="phone">已发送至{encryptMobile}</span>
					<span
						onClick={this.onTrigger}
						className={
							isClickedSend
								? "time color-F82633"
								: isSmsCount
									? "time"
									: "time color-F82633"
						}
					>
						{isClickedSend ? "发送" : isSmsCount ? `${countDownTime}s` : "重发"}
					</span>
				</div>
				<input
					className="sms-input"
					value={smsCode}
					type={this.getInputType()}
					pattern="[0-9]"
					maxLength={6}
					onChange={e => {
						this.inputChange(e);
					}}
				/>
				<div className="input-box">
					{["", "", "", "", "", ""].map((item, index) => (
						<div
							key={index}
							className={
								index == smsCodeArr.length
									? "input-item border-F82633"
									: "input-item"
							}
						>
							{smsCodeArr[index]}
						</div>
					))}
				</div>
			</Modal>
		);
	}
}

export default paySmsModal;
